/*====================================================*/
/*【Master Stylesheet】css[01.0].css
/*====================================================*/
/*( )*/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*
01 ==========================================
Base【サイト設定】
要素 -================================
*/
@charset "utf-8";
/* スクロールバーを常に表示する
/* ブラウザーや表示域の大小によらず常に表示する */
html {
overflow: scroll;
overflow: -moz- scroll bars- vertical;
overflow-x: scroll;
}
/*
[02]==========================================
【要素】document body 本体 サイト全体の指定
==============================================
*/
body {
margin: 0px;
padding: 0px;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
color: #003366; /*文字色*//* #003366ブルーブラック #ffffff白 */
background-color: #FFFFFF; /*全体の地色*//* #ffffff白 transparent透明＝色設定の解除 */
/* background-image: url("Upload/Cvr&Smbl/$ Bnr, BGImg/bg12w060h.png"); /*背景画像 */
/* background-repeat: repeat-x; /* */
}
a {
color: #000066; /*リンク部分の色 *//* #017acdコバルト */
}
/*
[10]==========================================
#container【コンテナー指定】入れ物, 文書群ボックス
#container-page【Page用コンテナー指定】
┏━━━━━━━━━━━━━━━━━┓
┃id="container" ┃
┃ id="container-page" ┃
==============================================
*/
#container{
width: 840px; /*700px*/
margin-top: 0;
margin-right: auto; /* 中央揃えに */
margin-bottom: 0;
margin-left: auto; /* 中央揃えに */
padding: 0;
background-color: #ffffff; /*コンテナー範囲の背景地色 #ffffff=白 #efeeef=極薄い灰 */
}
#container-page {
width: 840px; /*590px*/
margin-top: 0;
margin-right: auto; /* 中央揃えに */
margin-bottom: 0;
margin-left: auto; /* 中央揃えに */
padding: 0;
background-color: #ffffff; /*コンテナー範囲の背景地色 #ffffff=白 #efeeef=極薄い灰 */
}
/* background-image: url(../90Gnrl_pic/sq20px-BGI-Sq.gif); /*コンテナー範囲の背景画像 */
/* background-repeat: repeat-y; /*縦方向にのみ*/
/*
[20]==========================================
#content【コンテンツ指定】content, main メイン文書
#content-page【Page用コンテンツ指定】
┌┌─────────────────┐┐
│┏ id="content" ━━━━━━┓┬──┐│
│┃ id="content-page" ━━━━┓│
==============================================
*/
#content {
margin: 0px 0px 0px 0px;/* container'margin-top 0; -right auto; -bottom 0; -left auto; */
padding: 0px 0px 0px 0px;/* container'padding: 0; */
width: 600px;/* container'width 500 */
float: left;
display: inline;
background-color: #ffffff;/**/
/*メイン文書の右に線を引く*/
/* border-right: solid 1px #666666;*/
}
#content-page {
margin: 0px 0px 0px 0px;/*上 右 下 左 */
padding: 0px 0px 0px 0px;
width: 800px;/*container width590*/
float: left; /*フロート*/
display: inline;
background-color: #ffffff;/**/
}
#content p {
margin: 5px 0px 10px 15px;/*上 右 下 左 */
padding: 0px 0px 0px 0px;
font-size: 1.15em;
line-height: 1.75em;
}
#content-page p {
margin: 5px 0px 10px 15px;/*上 右 下 左 */
padding: 0px 0px 0px 0px;
font-size: 1.15em;
line-height: 1.75em;
} /* */
#content img {
margin: 0px 0px 0px 40px;/*上 右 下 左 */
padding: 0px 0px 0px 0px;
float: right; /* */
/* text-align: none; /* right left none */
/* text-align: left; /* */
}
#content-page img {
margin: 0px 0px 10px 40px;/*上 右 下 左 */
padding: 0px 0px 0px 0px;
float: right; /* */
}
/*注釈*/
#content note {
font-size: 0.85em;
line-height: 1.5em;
margin: 5px 0px 0px 0px;/*上 右 下 左 */
padding: 0px 0px 0px 15px;
}
#content-page note {
font-size: 0.85em;
line-height: 1.5em;
margin: 5px 0px 0px 0px;/*上 右 下 左 */
padding: 0px 0px 0px 15px;
}
#content h1 {
margin: 6px 0px 0px 0px;/*上 右 下 左 */
padding: 0px 0px 0px 0px;
color: #0000CC;
font-size: 1.25em;
line-height: 1.75em;
text-align: center; /* */
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bt-roll-120x45Act.png");
background-repeat: repeat-x;
background-color: #FFFFFF;
}
#content h1 #img {
margin: 6px 0px 0px 0px;/*上 右 下 左 */
text-align: none; /* right left none */
/* text-align: left; /* */
}
#content-page h1 {
margin: 6px 0px 0px 0px;/*上 右 下 左 */
padding: 0px 0px 0px 0px;
color: #0000CC;
font-size: 1.25em;
line-height: 1.75em;
text-align: center; /* */
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bt-roll-120x45Act.png");
background-repeat: repeat-x;
background-color: #CCCCCC;
}
#content-page h1 #img {
margin: 0px 0px 0px 0px;/*上 右 下 左 */
text-align: none; /* right left none */
/* text-align: left; /* */
}
#content h2 {
margin: 6px 0px 10px 5px;/*上 右 下 左 */
padding: 0px 0px 0px 15px;
color: #FFFF00;
font-size: 1em;
line-height: 1.75em;
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg01'bar_h32sq.png");
background-repeat: repeat-x;
background-color: #0000CC;
}
#content-page h2 {
margin: 6px 0px 10px 5px;/*上 右 下 左 */
padding: 0px 0px 0px 15px;
color: #FFFF00;
font-size: 1em;
line-height: 1.75em;
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg01'bar_h32sq.png");
background-repeat: repeat-x;
background-color: #0000CC;
}
#content h3 {
margin: 4px 0px 10px 5px;/*上 右 下 左 */
padding: 0px 0px 0px 15px;
font-size: 1em;
line-height: 1.5em;
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg24Aq_24sq.png");
background-repeat: repeat-x;
background-color: #00FFFF;
}
#content-page h3 {
margin: 4px 0px 10px 5px;/*上 右 下 左 */
padding: 0px 0px 0px 15px;
font-size: 1em;
line-height: 1.5em;
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg24Aq_24sq.png");
background-repeat: repeat-x;
background-color: #00FFFF;
}
#content h4 {
margin: 4px 0px 10px 0px;/*上 右 下 左 */
padding: 0px 0px 0px 15px;
font-size: 1.15em;
line-height: 1.75em;
}
#content-page h4 {
margin: 4px 0px 10px 0px;/*上 右 下 左 */
padding: 0px 0px 0px 15px;
font-size: 1em;
line-height: 1.75em;
}
#content p#message {margin-top: 0}
#content-page p#message {margin-top: 0}
/*====================================================*/
/* ◆◆【追加クラス】◆◆ */
/*====================================================*/
/*テキスト スクロール Text scroll */
.txt-scroll {
/*スクロールバー↓scroll常につける, auto指定サイズを超えたとき*/
overflow: auto;
width: 580px;
height: 180px;
margin: 0px 0px 20px;
padding: 0px 0px 20px;
}
/*強調文字*/
.deforme {
background-color: #dee;
color: #666;
font-size: 0.9em;
font-weight: bold;
text-decoration: none; /*無しnone*/
}
/*注釈*/
.note {
font-size: 0.75em;
line-height: 1.5em;
margin: 0px 0px 0px 0px;/*上 右 下 左 */
padding: 0px 0px 0px 0px;
}
/*右フロート,幅360px,文字左配置*/
.floatRight-w360 {
float: right;
text-align: center;
margin: 0px 5px 0px 5px;
padding: 0px 0px 0px 0px;
width: 360px;/* ボックス幅 140px */
}
/*右フロート,幅150px,文字中央配置*/
.floatRight-150-center {
float: right;
text-align: center;
margin: 0px;
padding: 0px;
width: 150px;/* ボックス幅 150px */
}
/*右フロート,幅150px,文字左配置*/
.floatRight-150 {
float: right;
margin: 0px;
padding: 0px;
width: 150px;/* ボックス幅 150px */
}
/*左フロート,幅148px,文字右配置*/
.floatleft-148 {
float: left;
margin: 20px;
padding: 20px;
width: 148px;/* ボックス幅 148px */
}
/*テキスト左配置*/
.txt-left {
text-align: left;
}
/*テキスト中央配置*/
.txt-center {
text-align: center;
}
/*テキスト右配置*/
.txt-right {
text-align: right;
}
.feed {
font-size: 0.675em;
color: #003333; /*#003333濃灰*/
line-height: 1.5em;
margin: 8px 0px 10px 0px;
}
.feed a {
line-height: 30px;
text-align: center;
font-size: 0.85em;
color: #ffffff;
text-decoration: none;
text-align: center;
background-color: #666666; /*#666666濃灰*/
/*サイドバーの下に線を引く⇒ 無しに */
/**/ border: solid 1px #888888;/**/
padding: 5px 0px 5px 0px;
}
.feed img {
vertical-align: middle;
border: none;
}
/*
[30]==========================================
#header【ヘッダー指定】
#header-page【Page用ヘッダー指定】
┌┏━━━━━━━━━━━━━━━━━┓┐
│┗ id="header" ━━━━━━━━━━┛│
│┌ id="header-page" ────── │
==============================================
*/
#header {
height: 86px; /*ヘッダーエリアの高さ*/
margin: 0px 0px 0px 0px;
padding: 4px 0px 0px 0px;
background-color: #333399; /*ヘッダー部の地色 #005087紺 #333399紺2 #ffffff白 */
background-image:url("Upload/$0[Accessory]/[1 BGImg]/bg01_w12,h084.png"); /*ヘッダー部の背景画像*/
background-repeat: repeat-x; /* */
/* background-position: 0px 0px 0px; */ /*背景画像の表示位置 元 0 -60px */
/* border-bottom: solid 1px #666666; */ /*下に線を引く⇒ 無しに */
}
#header-page {
height: 70px; /*ヘッダーエリアの高さ*/
margin: 0px 0px 0px 0px;
padding: 4px 0px 0px 0px;
background-color: #333399; /*ヘッダー部の地色 #005087紺 #333399紺2 #ffffff白 */
background-image:url("Upload/$0[Accessory]/[1 BGImg]/bg01_w12,h060.png"); /*ヘッダー部の背景画像*/
background-repeat: repeat-x; /* */
}
#header p {
margin: 0;
padding: 4px 20px 0px 10px;
float:left;
color: #FFFFFF; /*#66CCFF水色 #005087紺*/
font-size: 0.8em;
line-height: 1em;
}
#header-page p {
margin: 0;
padding: 4px 20px 0px 10px;
float: left;
color: #ffff99;
font-size: 0.8em;
line-height: 1em;
}
#header h1 {
float:left;
font-size: 1em;
line-height: 1.2em;
color: #FFFFFF; /*文字色*/ /* #005087紺*/
margin: 0px 0px 0px;
padding: 0px 0px 0px;
/* background-image:url(../90Gnrl_pic/bar-blue564x28.png); */ /* h1へのバックイメージ＝なし */
/* background-repeat: repeat-x; */
/* background-position: center; */
}
#header-page h1 {
float:left;
font-size: 1.0em;
line-height: 1em;
color: #FFFFFF; /*文字色*/
margin: 0px 0px 0px;
padding: 0px 0px 0px;
/* background-image:url(../90Gnrl_pic/bar-blue564x28.png); */ /* h1へのバックイメージ＝なし*/
/* background-repeat: repeat-x; */
/* background-position: center; */
}
#header h2 {
float:right;
font-size: 0.75em;
line-height: 1.5em;
color: #66CCFF; /*#005087紺*/
margin: 0px 0px 0px;
padding: 0px 0px 0px;
}
#header-page h2 {
/*float: right;*/
margin: 0px 20px 0px 0px;
padding: 0px 0px;
line-height: 80px;
text-align: center;
}
/*背景色 #6699CC薄花田 #EFE6C6フレッシュ #e6e9C6タン #99CC99暗黄緑 #CCCC99薄カーキ #ffffcc薄黄*/
/*ナビ部分背景色 #0000ee=青 #005087=花田 #1c178f=濃紺 #333399=くすみ濃紺 */
/*
[30]==========================================
ul#G-Nav【グローバルナビ】global-navigation
┌┏━━━━━━━━━━━━━━━━━┓┐
│┗ ul id="G-Nav" ━━━━━━━━━┛│
│└──────────≪個別設定≫─┘│
==============================================
*/
ul#G-Nav {
height: 64px;
font-size: 1.25em;
/* font-weight: bold; /* */
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color: #1c178f; /*ナビ部分背景色 #6699CC薄花田 #005087=花田 #0000ee=青 #1c178f=濃紺 #333399=くすみ濃紺 */
/* background-image: url(../P0_UpImages/roll_120x32px.png); /*ナビ部分 背景画像*/
}
ul#G-Nav li {list-style-type: none;
float: left;
}
ul#G-Nav li a {
display: block;
width: 148px;
line-height: 64px;
text-decoration: none;
text-align: center;
color: #ffffff;
background-color: #005087;
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg01'roll_148x192px.png"); /* border-right: solid 1px #ffffff; */ /*コマの右に線を引く⇒ 無しに */
}
ul#G-Nav li a:hover {/*【カーソル合わせ】*/
background-color: #017acd;
background-position: left bottom;
}
ul#G-Nav .menuAct {/*【アクティブな現ページ】*/
color: #555555;
float: left;
width: 150px;
text-align: center;
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg01'roll_148x64px_Act.png"); /* 現ページのボタン */
line-height: 64px;
font-weight: bold;
}
ul#G-Nav .blind {/*【隠しメニュー】*/
color: #2b23af;
float: left;
width: 150px;
text-align: center;
font-weight: bold;
}
/*/【トピックパス】topicpath パンくずリスト p#bread breadcrumbs /*/
/*/トピックパス #topic /*/
p#topic {
/* float: right; */
background-color: #FFFFFF;
font-size: 0.75em;
margin: 0;
padding: 0px 20px 0px 20px;
}
/*背景色 #6699CC薄花田 #EFE6C6フレッシュ #e6e9C6タン #99CC99暗黄緑 #CCCC99薄カーキ #ffffcc薄黄*/
/*ナビ部分背景色 #0000ee=青 #005087=花田 #1c178f=濃紺 #333399=くすみ濃紺 */
/*
[33]==========================================
#sidebar【サイドメニュー】sidebar navigation
┌┌─────────────────┐┐
│├─────────────┐┏━━┓│
││ id="sidebar"┃ ┃│
==============================================
#ffffcc薄黄 #CCCC99薄カーキ #6699CC薄花田
*/
#sidebar {
width: 200px;
margin: 0px 0px 0px 0px;/* 上 右 下 左 */
padding: 0px 4px 10px 4px;
float: right;
font-weight: normal;
background-color: #cccccc; /*背景*/ /*#cccccc:グレー #6699CC薄花田 #EFE6C6フレッシュ #e6e9C6タン #99CC99暗黄緑 #CCCC99薄カーキ #ffffcc薄黄*/
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg_sq20px-light.gif"); /*背景画*/ /*[Bnr,BGI]/bg_sq20px-light.gif*/
border-right: solid 2px #cccccc; /*サイドバー右枠線*/ /*#cccccc:グレー*/
border-left: solid 2px #cccccc; /*サイドバー左枠線*/
border-bottom: solid 2px #cccccc; /*サイドバー下枠線*/
}
ul.sidemenu {
margin: 0px 0px 0px 0px; /*上,右,下,左 */
padding: 0px 0px 0px 0px;
line-height: 0; /**/
text-align: center; /* */
border-top: solid 2px #666666; /*上枠線*/ /*#666666:極濃灰*/
}
ul.sidemenu li {
list-style-type: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 20px 0px;
}
ul.sidemenu li a {
display: block;
text-decoration: none;
color: #000000;
padding-left: 0px;/**/
background-color: transparent;
/* border-bottom: solid 2px #666666; /*下枠線*/ /*#666666:極濃灰*/
}
/*カーソルを合わせたとき*/
ul.sidemenu li a:hover {
background-color: #ffffcc; /*背景*/ /*#ffffcc:薄黄*/
color: #000000;/*文字色 #000000:黒*/
}
/*基本テキスト*/
#sidebar p {
margin: 0px 0px 12px 0px; /*上,右,下,左 */
padding: 0px 0px 0px 0px;
font-size: 0.75em;
color: #003333; /*文字色 #003333チャコール*/
line-height: 1.5em;
text-align: center; /**/
}
/*タイトル１ */
#sidebar h1 {
margin: 8px 0px 4px 0px; /*上,右,下,左 */
padding: 0px 0px 0px 0px;
font-size: 0.9em;
font-weight: bold;
line-height: 1.25em;
text-align: center;
background-color: transparent; /*背景色*/ /*transparent:透明*/
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg20G_w16.png"); /*背景図*/ /*bg20G_w16.png*//*bg16G_w32Rd.png =長丸の連続になる*/
}
/*タイトル２ */
#sidebar h2 {
margin: 8px 0px 4px 0px; /*上,右,下,左 */
padding: 0px 0px 0px 0px;
font-size: 0.75em;
font-weight: bold;
line-height: 1.25em;
text-align: center;
background-color: #e6e9C6; /*背景色*/ /*transparent:透明 #6699CC:薄花田 #EFE6C6:フレッシュ #e6e9C6:タン #99CC99:暗黄緑 #CCCC99:薄カーキ*/
/* background-image: url("Upload/! Cvr&Smbl/$ Bnr, BGImg/bg16sq.png"); /**/
}
/*メニュー１*/
#sidebar h3 {
margin: 0px 0px 0px 0px; /*上,右,下,左 */
padding: 4px 0px 0px 0px;
font-size: 0.9em;
font-weight: bold;
line-height: 2.0em; /**/
text-align: center;
background-color: #6699CC; /*背景色 transparent:透明 #6699CC:薄花田 #EFE6C6:フレッシュ #e6e9C6:タン #99CC99:暗黄緑 #CCCC99:薄カーキ*/
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg36Blu_36sq.png"); /*bn_10_w180,h60.png はテキストのline-heightに拘束*/
}
/*メニュー２*/
#sidebar h4 {
margin: 0px 0px 0px 0px; /*上,右,下,左 */
padding: 3px 0px 5px 0px;
font-size: 0.75em;
color: #FFFFFF; /*#003333濃灰*/
/* font-weight: bold; /* */
line-height: 1.5em;
text-align: center;
background-color: #6699CC; /*背景色 transparent:透明 #6699CC:薄花田 #EFE6C6:フレッシュ #e6e9C6:タン #99CC99:暗黄緑 #CCCC99:薄カーキ*/
/* background-image: url("Upload/! Cvr&Smbl/$ Bnr, BGImg/sq36px-h4-blu_ed.png"); /**/
}
/*/ --------------------------------
右サイドバー
-------------------------------- /*/
/* #sidebar-right 右サイドバー範囲設定 */
/* #sidebar-right 右サイドバー指定 */
/* .info 右サイドバー設定 */
/*====================================================*/
/* #footer【フッター 設定】
/*====================================================*/
#footer {
clear: both;
margin: 0;
padding: 0px;
font-size: 0.75em;
text-align: center;
background-image: url("Upload/$0[Accessory]/[1 BGImg]/bg20G_w16.png");
background-repeat: repeat-x;/*横方向のみ*/
background-color: #ffffff;
/* border-top: solid 1px #666666;*/
/*線を無しにする */
border: none;
/* width: 760px;*/
}
#footer h5 {
/* clear: both;
font-size: 0.75em;
text-align: center;
/*見出し4用のバー↓*/
background-image:url("Upload/$0[Accessory]/[1 BGImg]/bg20G_w16.png");
background-position: center;
line-height: 24px;
background-repeat: no-repeat;
margin-left: 10px; }
/*アドレスaddress*/
address {
font-size: 0.75em;
font-style: normal;
color: #666666;
text-align: left;
padding: 0px;/* 12px */
}
/*フッターメニュー#bottom-nav*/
ul#bottom-nav {
font-size: 0.75em;
margin-top: 0;
margin-bottom: 0px;/* 3px */
margin-left: 0;
padding-left: 130;
height: 24px;
background-color: #005087;
background-image: url("Upload/$0[Accessory]/[1 BGImg]/btn-rollover03.png");
}
ul#bottom-nav li {
list-style-type: none;
float: left;
}
ul#bottom-nav li a {display: block;
width: 120px;
line-height: 24px;
text-decoration: none;
text-align: center;
color: #555555;
background-color: #005087;
background-image: url("Upload/$0[Accessory]/[1 BGImg]/btn-rollover03.png");
/*コマの右に線を引く⇒ 無しに */
/* border-right: solid 1px #ffffff;*/
}
ul#bottom-nav li a:hover {
color: #555555;
background-color: #017acd;
background-position: left bottom;
}
/* アクティブな現ページ */
ul#bottom-nav .menuAct {
color: #555555;
float: left;
width: 120px;
text-align: center;
/*現ページボタンbtn-menuAct02.png↓*/
background-image: url("Upload/$0[Accessory]/[1 BGImg]/btn-menuAct02.png");
line-height: 24px;
font-weight: bold; }
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*
【htmlへの記述への参考】
IDセレクター #idname
意味 id属性地が「idname」の要素
例 #header {color: #006600; }
CSS記述： #idname { 内容; }
div要素： ブロックに適用する要素のまとまり(ブロック要素 division~分割,区分~)
HTML記述： 内容(包含要素)～
クラスセレクター .classname
意味 class属性が「classname」の要素
例 .note {color: #ffoooo; }
CSS記述： .classname { 内容; }
span要素： インラインで適用する要素のまとまり(インライン要素 text span)
HTML記述： 内容(包含要素)～
ファビコン(favicon)を用意する
favicon: favorite+iconに由来。.ico形式、.png形式が一般的
.ico形式の場合
/png形式の場合
※ favicon.ico や favicon.png という名でサーバーのルート直下に置いておくと、ブラウザが自動的に読み込んでくれる。
ただし、サイトによっては、置き場所がルート直下とは限らないことから、(XHTMLの) head要素内に link要素を指定しておくと確実。
※ ファビコンサイズ 16px四方／制作(カンバスサイズ) 32px四方
*/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**//**/
/*
┌┌────────────────┐┐─┌└│┘┐├┬┴┤┼
│├────────────┬┏━━┓│━┏┗┃┛┓┣┳┻┫╋
││ │┃ ┃│============
*/